<script setup lang="js">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import axios from 'axios';

const echartBar = ref();
const chartOptions = ref({
    xAxis: [],
    legend: [],
    series: []
});

// 创建映射对象
const modeMapping = {
    'Buses': '公交车',
    'Cars': '汽车',
    'Trucks': '卡车',
    'Vans': '货车'
};

// 处理数据并生成 ECharts 所需格式
function processData(rawData) {
    const years = [...new Set(rawData.map(item => item.year))]; // 获取年份
    const modes = [...new Set(rawData.map(item => item.mode))]; // 获取车辆类型
    const seriesList = [];

    modes.forEach(mode => {
        const modeData = years.map(year => {
            // 根据年份和类型找到对应的value
            const item = rawData.find(item => item.year === year && item.mode === mode);
            return item ? item.value : 0; // 如果没有数据，默认值为0
        });

        // 使用映射对象将车辆类型名称转换为中文
        const modeName = modeMapping[mode] || mode;

        seriesList.push({
            type: 'line',
            name: modeName,
            data: modeData,
            smooth: true, // 设置曲线平滑
            showSymbol: false,
            emphasis: {
                focus: 'series'
            }
        });
    });

    // 使用映射后的车辆类型作为图例
    const legend = modes.map(mode => modeMapping[mode] || mode);

    return {
        xAxis: years,
        legend: legend,
        series: seriesList
    };
}

// 获取数据并初始化图表
function getData() {
    axios.get('/api/queryAllSalesMode')
        .then((response) => {
            console.log("原数据：", response.data.data);
            const processedData = processData(response.data.data);
            // 更新chartOptions并初始化图表
            chartOptions.value = processedData;
            chartBartInit();
        })
        .catch((error) => {
            console.error("获取数据失败:", error);
        });
}

// 初始化图表
function chartBartInit() {
    if (!chartOptions.value.xAxis.length || !chartOptions.value.series.length) {
        console.warn("数据为空，无法初始化图表");
        return;
    }

    const myChart = echarts.init(echartBar.value, "light", {
        width: 500,
        height: 450
    });

    const option = {
        animationDuration: 1000,
        title: {
            text: '不同车辆类型销售量走势',
            textStyle: {
                color: '#fff',
            },
            top: '5%',
            left: '17%',
        },
        tooltip: {
            order: 'valueDesc',
            trigger: 'axis'
        },
        legend: {
            data: chartOptions.value.legend,
            textStyle: {
                color: '#fff',
            },
            top: '15%',
            left: '15%',
        },
        xAxis: {
            type: 'category',
            data: chartOptions.value.xAxis,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff'
            }
        },
        yAxis: {
            name: '销售量',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff'
            }
        },
        grid: {
            top: '30%',
            right: 100,
            left: 85,
            bottom: 20,
            borderColor: '#fff'
        },
        series: chartOptions.value.series
    };

    myChart.setOption(option);
}

onMounted(() => {
    getData();
});
</script>

<template>
    <div ref="echartBar" style="width: 100%; height: 400px;"></div>
</template>

<style scoped>
</style>




    

